<template>
	<scroll-view @scrolltolower="handleScrollToLower" class="page" scroll-y :lower-threshold="300">
		<u-tabs :list="menu" @click="changeTabs" lineColor='#FBE43F'
			:inactiveStyle="{ fontSize: '32rpx', transform: 'scale(1)',color: '#979797'  }"
			:activeStyle="{ color: '#000000',fontSize: '40rpx', }">
		</u-tabs>
		<Article :tabList="tabList"></Article>
	</scroll-view>
</template>

<script>
	import {
		listByCategoryOneName,
		categoryTwoList,
		discussionList
	} from '@/api.js'
	import Article from '@/compontents/Article.vue'

	export default {
		components: {
			Article,
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				total: 0,
				menu: [],
				menuName: '',
				CurrentTabs: 0,
				checkedName: '全部',
				tabList: []
			}
		},
		onLoad(opt) {

			this.init(opt.menu)
		},
		methods: {
			changeTabs(e) {
				this.CurrentTabs = e.index;
				this.checkedName = e.name;
				this.pageNo = 1
				this.pageSize = 10
				this.total = 0
				this.tabList = []
				this.getList()
			},
			init(menuName) {

				uni.showLoading({
					title: '加载中'
				});
				this.menuName = menuName
				this.getMenu()
				this.getList()
				uni.hideLoading();
			},
			async getMenu() {
				let that = this
				let title = ''
				let res = await listByCategoryOneName({
					categoryOneName: this.menuName
				})
				this.menu = res.result
				this.menu.unshift({
					name: "全部"
				})
				uni.setNavigationBarTitle({
					title: this.menuName
				})
			},

			handleScrollToLower() {
				let pageNo = this.pageNo
				let pageSize = this.pageSize
				let total = this.total
				console.log('一共' + total + '条，当前已经加载' + pageSize * pageNo + '条');
				if (total <= pageNo * pageSize) {
					console.log('已经到底了');
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.pageNo++;
				this.getList();
				uni.hideLoading();
			},
			async getList() {
				let that = this
				// 查询列表数据
				let res = await discussionList({
					categoryOneName: this.menuName,
					categoryTwoName: that.checkedName,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				})
				this.tabList = this.tabList.concat(res.result.records)
				this.total = res.result.total
				console.log('列表', res.result.records);

			},

		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 750rpx;
		height: 100vh;
	}
</style>